<template>
  <div class="selectDateBox">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-date-picker
          v-model="dateArray"
          size="small"
          type="daterange"
          range-separator="至"
          start-placeholde="开始日期"
          end-placeholde="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import moment from "moment";
export default {
  name: "datePicker",
  props: {
    tempTime: {
      type: String,
      default() {
        return "";
      },
    },
    //将isDisableDate设置为true并且tempTime为当天,则日期控件不会限制日期选择,可以任选日期
    isDisableDate: {
      type: Boolean,
      default() {
        return false;
      },
    },
    //本周和上周 选择周一至周日范围
    MonToSun: {
      type: Boolean,
      default() {
        return false;
      },
    },
    //删除今天这个选择
    deleteToday: {
      type: Boolean,
      default() {
        return false;
      },
    },
    //需要另加className的数据
    // markDateList: {
    //   type: Boolean,
    //   default() {
    //     return [];
    //   },
    // },
    //禁止选中最小日期
    tempMinTime: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      dateArray: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [],
      },
    };
  },
  watch: {
    dateArray(val) {
      this.$emit("init", val);
      let _this = this;
      this.pickerOptions.shortcuts = [
        {
          text: "上季度",
          onClick(picker) {
            const oDate = new Date();
            var thisYear = oDate.getFullYear();
            var thisMonth = oDate.getMonth() + 1;
            var n = Math.ceil(thisMonth / 3); //季度,上一个季度则-1
            var prevN = n - 1;
            if (n == 1) {
              thisYear--;
              prevN = 4;
            }
            var month = prevN * 3; //月份
            var start = new Date(thisYear, month - 3, 1);
            var end = new Date(thisYear, month, 0);
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "本季度",
          onClick(picker) {
            const oDate = new Date();
            var thisYear = oDate.getFullYear();
            var thisMonth = oDate.getMonth() + 1;
            var n = Math.ceil(thisMonth / 3); //季度
            var month = n * 3 - 1; //月份
            var start = new Date(thisYear, month - 2, 1);
            var end = new Date(_this.tempTime);

            if (_this.isDisableDate) {
              end = new Date(thisYear, month + 1, 0);
            }
            end.setHours(0); //把时间设置成0:0:0 -0点0分0秒,这样选中当日,就不会被返回了
            end.setMinutes(0);
            end.setSeconds(0);
            start.setHours(0);
            start.setMinutes(0);
            start.setSeconds(0);
            if (end.getTime() < start.getTime()) {
              _this.$message.warning(
                `该季度初${moment(start).format("YYYY-MM-DD")}超出${
                  _this.tempTime
                }时间限制了`
              );
              picker.$emit("pick", ["", ""]);
              return;
            }

            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "上周",
          onClick(picker) {
            const oDate = new Date();
            oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 7);
            var day = oDate.getDay();
            var start = new Date();
            var end = new Date();
            if (day == 0) {
              start.setDate(oDate.getDate());
              end.setDate(oDate.getDate() + 6);
            } else {
              if (_this.MonToSun) {
                start.setTime(oDate.getTime() - 3600 * 1000 * 24 * (day - 1));
                end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (7 - day));
              } else {
                start.setTime(oDate.getTime() - 3600 * 1000 * 24 * day);
                end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (6 - day));
              }
            }

            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "本周",
          onClick(picker) {
            var start = new Date();
            var end = new Date(_this.tempTime);
            var thisDay = start.getDay();
            var thisDate = start.getDate();
            if (thisDay != 0) {
              if (_this.MonToSun) {
                start.setDate(thisDate - thisDay + 1);
              } else {
                start.setDate(thisDate - thisDay);
              }
              if (_this.isDisableDate) {
                end.setDate(start.getDate() + 6);
              }
            }
            start.setHours(0);
            start.setMinutes(0);
            start.setSeconds(0);
            if (end.getTime() < start.getTime()) {
              _this.$message.warning(
                `该季度初${moment(start).format("YYYY-MM-DD")}超出${
                  _this.tempTime
                }时间限制了`
              );
              picker.$emit("pick", ["", ""]);
              return;
            }
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "上月",
          onClick(picker) {
            const oDate = new Date();
            var year = oDate.getFullYear();
            var month = oDate.getMonth();
            var start, end;
            if (month == 0) {
              year--;
              start = new Date(year, 11, 1);
              end = new Date(year, 11, 31);
            } else {
              start = new Date(year, month - 1, 1);
              end = new Date(year, month, 0);
            }
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "本月",
          onClick(picker) {
            var start = new Date();
            var end = new Date(_this.tempTime);
            start.setDate(1);
            if (_this.isDisableDate) {
              const oDate = new Date();
              var year = oDate.getFullYear();
              var month = oDate.getMonth();
              end = new Date(year, month + 1, 0);
            }
            if (end.getTime() < start.getTime()) {
              _this.$message.warning(
                `时间区间${moment(start).format("YYYY-MM-DD")}至${moment(
                  end
                ).format("YYYY-MM-DD")}不符合`
              );
              picker.$emit("pick", ["", ""]);
              return;
            }
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "昨天",
          onClick(picker) {
            var start = new Date();
            var end = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            end.setTime(end.getTime() + 3600 * 1000 * 24);
            if (
              end.getTime() >
              new Date(_this.tempTime).getTime() + 3600 * 1000 * 24
            ) {
              _this.$message.warning(`超出${_this.tempTime}时间限制了`);
              picker.$emit("pick", ["", ""]);
              return;
            }

            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "今天",
          onClick(picker) {
            var start = new Date();
            var end = new Date();
            end.setHours(0); //把时间设置成0:0:0 -0点0分0秒,这样选中当日,就不会被返回了
            end.setMinutes(0);
            end.setSeconds(0);
            if (end.getTime() > new Date(_this.tempTime).getTime()) {
              _this.$message.warning(`超出${_this.tempTime}时间限制了`);
              picker.$emit("pick", ["", ""]);
              return;
            }

            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "近7天",
          onClick(picker) {
            var start = new Date(_this.tempTime);
            var end = new Date(_this.tempTime);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
            end.setTime(end.getTime());
            picker.$emit("pick", [start, end]);
            this.dateArray = [start, end];
          },
        },
        {
          text: "近30天",
          onClick(picker) {
            var start = new Date(_this.tempTime);
            var end = new Date(_this.tempTime);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
            end.setTime(end.getTime());
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "近90天",
          onClick(picker) {
            var start = new Date(_this.tempTime);
            var end = new Date(_this.tempTime);
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 89);
            end.setTime(end.getTime());
            picker.$emit("pick", [start, end]);
          },
        },
      ];
    //   if (this.markDateList.length > 0) {
    //     this.pickerOptions.cellClassName = (time) => {
    //       if (
    //         this.markDateList.includes(
    //           moment(new Date(time)).format("YYYY-MM-DD")
    //         )
    //       ) {
    //         return "circle-red";
    //       }
    //     };
    //   }
      if (this.deleteToday) {
        let index = this.pickerOptions.shortcuts.findIndex((v) => {
          return v.text == "今天";
        });
        this.pickerOptions.shortcuts.aplice(index, 1);
      }
      this.pickerOptions.disabledDate = function disabledDate(time) {
        if (_this.disabledDate) {
        } else {
          if (_this.tempMinTime) {
            return (
              time.getTime() > new Date(_this.tempTime).getTime() ||
              new Date(_this.tempMinTime).getTime() >
                time.getTime() + 3600 * 1000 * 24 * 1
            );
          } else {
            return time.getTime() > new Date(_this.tempTime).getTime();
          }
        }
      };
    },
  },
  created() {
    const start = new Date();
    const end = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    end.setTime(end.getTime() + 3600 * 1000 * 24);
    this.dateArray = [start, end];
  },
};
</script>
<style lang="scss">
.selectDateBox .el-range-editor.el-input__inner {
  width: 240px;
}
.selectDateBox .el-input__icon,
.el-date-editor .el-range-separator {
  font-size: 12px;
  line-height: 20px;
  padding: 0;
}
.selectDateBox .el-range-editor.el-range-input {
  font-size: 12px;
}
.selectDateBox .el-range-separator .el-input__inner {
  height: 28px;
  line-height: 28px;
}
.selectDateBox > .el-row {
  margin-bottom: 0;
}
.el-picker-panel__shortcut {
  font-size: 12px;
  width: 50%;
  padding-left: 10px;
  display: inline-block;
}
.el-date-range-picker__content {
  padding: 5px;
  .circle-red {
    > div span {
      display: inline-block;
      border: 1px solid #bbb;
      border-radius: 50px;
      box-sizing: content-box;
    }
    > div span::after {
      content: "";
      width: 2px;
      position: absolute;
      top: -1px;
      height: 2px;
      background-color: red;
      right: -2px;
      border-radius: 50%;
      display: inline-block;
      border: 1px solid red;
    }
  }
}
.el-date-table td div {
  height: 22px;
}
.el-date-table td span,
.el-date-table td {
  width: 16px;
  height: 16px;
  line-height: 16px;
}
.el-date-range-picker__header div {
  font-size: 14px;
}
.el-picker-panel {
  line-height: 22px;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 345px;
}
</style>